<template>
  <view class="p-4 h-[100vh] flex items-center justify-center bg-color">
    <MyCard padding="20rpx">
      <u-form ref="formRef" :model="form" :rules="rules" labelPosition="left">
        <!--<u-form-item prop="userHead">-->
        <!--  <button class="w-[200rpx] h-[200rpx] avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">-->
        <!--    <image v-if="userHead" :src="userHead" class="w-[200rpx] h-[200rpx]" />-->
        <!--    <image v-else class="w-[200rpx] h-[200rpx]" src="/static/image/account.png" />-->
        <!--  </button>-->
        <!--</u-form-item>-->
        <!--<u-form-item label="昵称" prop="userNickname">-->
        <!--  <input border="none" placeholder="请输入昵称" type="nickname" @change="getUserName" />-->
        <!--</u-form-item>-->
        <!--<u-form-item label="性别" prop="userSexName" @click="showSex = true">-->
        <!--  <u-input v-model="form.userSexName" border="none" disabled disabledColor="#ffffff" placeholder="请选择性别" />-->
        <!--  <template #right>-->
        <!--    <u-icon name="arrow-right"></u-icon>-->
        <!--  </template>-->
        <!--</u-form-item>-->
        <u-form-item>
          <view class="flex items-center text-xs text-[#0FDB99]">
            <checkbox-group @change="checkboxChange">
              <checkbox :checked="form.agreement" class="scale-[0.65] round #0FDB99" value="cb" />
            </checkbox-group>
            <text class="text-gray-400">
              我同意使用我所提交的信息用于快捷登录。查看
              <text class="text-[#0FDB99]" @tap="updateServiceAgreementModel(true)">《服务协议》</text>
              及
              <text class="text-[#0FDB99]" @tap="updateConfidentialityPrivacyShowModel(true)">《保密隐私协议》</text>
            </text>
          </view>
        </u-form-item>

        <view class="mt-10">
          <button
            :open-type="form.agreement ? 'getPhoneNumber' : 'error'"
            class="text-white border-none h-[100%] bg-[#0FDB99] bg-gradient-to-r w-full"
            hover-class="hover-button-class"
            @click="loginHandle"
            @getphonenumber="getPhoneNumberHandle"
          >
            微信一键登录
          </button>
        </view>
      </u-form>
    </MyCard>

    <u-action-sheet
      :actions="actions"
      :show="showSex"
      description="如果选择保密会报错"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    />
    <!--服务协议-->
    <u-modal
      :show="serviceAgreementShow"
      closeOnClickOverlay
      title="服务协议"
      @confirm="updateServiceAgreementModel(false)"
    >
      <view class="h-[600rpx] overflow-auto">
        <view>尊敬的用户，欢迎阅读武汉体育中心服务协议 (以下简称”本服务协议”)。武汉体育中心与用户共同确认:</view>
        <view class="mt-4">
          1.
          用户点击本服务协议正本下方的"微信一键登录"按钮并完成注册、获得武汉体育中心小程序账号时，则视为用户与武汉体育中心达成本服务协议。本服务协议即在用户和武汉体育中心之间产生法律效力。
        </view>
        <view class="mt-4">
          2.
          本服务协议内容包括协议正文及所有武汉体育中心经发布的或将来可能发布的各类规则。用户在使用武汉体育中心提供的各项服务的同时，承诺接受并遵守相关的各类规则。
        </view>
        <view class="mt-4">
          3.
          武汉体育中心有权根据需要不时地制定、修改本服务协议正文或各类规则，如本服务协议有任何变更，武汉体育中心将发布公告，予以公示。经修订的协议一经公布后，立即自动生效。
          武汉体育中心及用户均已认真阅读本服务协议中的全部条款及武汉体育中心发布的其他各类规则的内容，对协议正文及各类规则均以知晓、理解并接受，同意将其作为确定双方权利、义务的依据。
        </view>
      </view>
    </u-modal>
    <u-modal
      :show="confidentialityPrivacyShow"
      closeOnClickOverlay
      title="保密隐私协议"
      @confirm="updateConfidentialityPrivacyShowModel(false)"
    >
      <view class="h-[600rpx] overflow-auto">
        <view class="mt-4">
          1.
          使用方须严格按照《中华人民共和国保守国家秘密法》、《中华人民共和国保守国家秘密法实施办法》、《计算机信息系统保密管理暂行规定》、《国家秘密载体保密管理的规定》等相关法律法规及管理文件的要求，对保密资料进行有效管理，做好安全保密工作。
        </view>
        <view class="mt-4">2. 使用方为保密资料的安全管理者。</view>
        <view class="mt-4">3. 使用方不得以商业目的使用该数据或者开发和生产其他产品。</view>
        <view class="mt-4">
          4.
          使用方可根据需要对数据内容进行必要的修改和对数据格式进行转换，但未经许可，不得将修改、转换后的数据对外发布和提供:使用方不得将成果在计算机互联网上传输、登载。
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useHttpRepositories from '@/composables/useHttpRepositories';
import { useUserStore } from '@/stores/user';
import { USER } from '@/api/user';
import { GENDER, USER_SOURCE } from '@/constants/base';

const { login, getUserInfo, setUser } = useUserStore();
const { user } = storeToRefs(useUserStore());
const { $http } = useHttpRepositories();
const userStore = useUserStore();
const showSex = ref(false);

const actions = computed(() => {
  const list = [];
  for (const genderKey in GENDER) {
    list.push({ value: genderKey, name: GENDER[genderKey] });
  }
  return list;
});

// 表单数据
const form = ref({
  agreement: false,
  userHead: '{}',
  userNickname: '体育馆会员', // 名字
  userSex: '1', // 性别
  userSexName: '男',
  userOpenid: '', // openid
  userSourceFrom: USER_SOURCE.weixin // 来源
});

// 选项
const sexSelect = (params) => {
  form.value.userSexName = params.name;
  form.value.userSex = params.value;
  showSex.value = false;
  formRef.value.validateField('userSexName');
};

const rules = {
  userNickname: {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change']
  },
  userSexName: {
    type: 'string',
    required: true,
    message: '请选择男或女',
    trigger: ['blur', 'change']
  }
  // userHead: {
  //   type: 'string',
  //   required: true,
  //   message: '请上传头像',
  //   trigger: ['blur', 'change']
  // }
};
const onChooseAvatar = (e) => {
  // 文件上传
  uni.uploadFile({
    url: import.meta.env.VITE_APP_FILEURL,
    filePath: e.detail.avatarUrl,
    name: 'file',
    formData: {},
    success: (result) => {
      const newResult: object = JSON.parse(result.data || '{}');
      form.value.userHead = JSON.stringify([newResult.data] || []);
      formRef.value.validateField('userHead');
    },
    fail: () => {
      formRef.value.validateField('userHead');
    }
  });
};

// 头像
const userHead = computed(() => {
  const picture = JSON.parse(form.value.userHead || '[]');
  if (picture.length) {
    return picture[0].path;
  } else {
    return '';
  }
});

const checkboxChange = (e: { detail: { value: string | string[] } }) => {
  form.value.agreement = e.detail.value.includes('cb');
};

const loginHandle = async () => {
  if (!form.value.agreement) {
    await uni.showToast({
      title: '请阅读并勾选页面协议',
      icon: 'none'
    });
  }
};

const getUserName = (params) => {
  form.value.userNickname = params.detail.value;
  formRef.value.validateField('userNickname');
};

// form表单实例
const formRef = ref(null);
const getPhoneNumberHandle = (e: any) => {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  formRef.value
    .validate()
    .then(() => {
      const code = e.detail.code;
      if (code) {
        // 如果有openid,那就直接登录并注册
        if (user.value.userOpenid) {
          toLogin(code);
        } else {
          // 如果没有openid那就先获取openid再登录
          getOpenId()
            .then((res: any) => {
              setUser(res);
              toLogin(code);
            })
            .catch(() => {
              uni.$u.toast('登录失败请重新登录');
            });
        }
      }
    })
    .catch(() => {
      uni.$u.toast('校验失败');
    });
};

// 获取用户的手机号并注册
const toLogin = (code) => {
  $http.post({
    url: USER.PHONE_NUMBER,
    data: {
      code, // 手机号需要解码
      ...form.value,
      userUnionId: user.value.userUnionId, // userUnionId
      userOpenid: user.value.userOpenid // openid
    },
    success: (res) => {
      userStore.setUser(res);
      // 返回上一个页面
      uni.navigateBack({
        delta: 1,
        fail: () => {
          uni.reLaunch({
            url: '/pages/subscribe/index'
          });
        }
      });
    },
    fail: () => {
      uni.$u.toast('登录失败请重新登录');
    }
  });
};

// 获取openid接口
const getOpenId = () => {
  return new Promise((resolve, reject) => {
    login().then((res) => {
      getUserInfo(res.code)
        .then((res) => {
          resolve(res);
        })
        .catch((message) => {
          reject(message);
        });
    });
  });
};

// 服务协议
const serviceAgreementShow = ref(false);

// 打开服务协议弹框
const updateServiceAgreementModel = (flag: boolean) => {
  serviceAgreementShow.value = flag;
};

// 保密隐私协议
const confidentialityPrivacyShow = ref(false);

// 打开服务协议弹框
const updateConfidentialityPrivacyShowModel = (flag: boolean) => {
  confidentialityPrivacyShow.value = flag;
};

onReady(() => {
  // 如果没有openId就重新请求接口去获取openId
  if (!user.value.userOpenid) {
    getOpenId().then((res) => {
      setUser(res);
    });
  }
});
</script>

<style lang="scss" scoped>
.avatar-wrapper {
  padding: 0;
  border-radius: 8px;
  margin: 40rpx auto;
}

.bg-color {
  background-image: linear-gradient(to top, #ffffff 0%, #00de96 100%);
}

.hover-button-class {
  @apply from-cyan-500 to-cyan-500;
}
</style>
